<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span class="header-title">博客分类管理</span>
                <div class="extra">
                    <el-button type="primary"
                        @click="dialogVisible = true; title = '添加分类'; clearData()">
                        <el-icon><Plus /></el-icon>
                        添加分类
                    </el-button>
                </div>
            </div>
        </template>
        <el-table :data="categorys" class="category-table" border stripe highlight-current-row>
            <el-table-column label="序号" width="80" type="index" align="center"></el-table-column>
            <el-table-column label="分类名称" prop="categoryName" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="创建人ID" prop="createId" align="center"></el-table-column>
            <el-table-column label="操作" width="120" align="center">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="showDialog(row)" />
                    <el-button :icon="Delete" circle plain type="danger" @click="deleteCategory(row)" />
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="暂无分类数据" />
            </template>
        </el-table>

        <!-- 添加/编辑分类弹窗 -->
        <el-dialog v-model="dialogVisible" :title="title" width="400px" class="category-dialog">
            <el-form :model="categoryModel" :rules="rules" label-width="90px" class="dialog-form">
                <el-form-item label="分类名称" prop="oldname">
                    <el-input v-model="categoryModel.oldname" minlength="1" maxlength="10" clearable></el-input>
                </el-form-item>
                <el-form-item label="修改名称" prop="newname" v-if="title != '添加分类' ">
                    <el-input v-model="categoryModel.newname" minlength="1" maxlength="15" clearable></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="title == '添加分类' ? addCategory() : updateCategory()">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<script setup>
import {
    Edit,
    Delete,
    Plus
} from '@element-plus/icons-vue'
import { ref } from 'vue'
const categorys = ref([])

// 渲染数据的函数
import { articleCategoryListAllService } from '@/api/article.js';
const articleCategory = async () => {
    let result = await articleCategoryListAllService();
    categorys.value = result.data;
}
articleCategory();

//控制添加分类弹窗
const dialogVisible = ref(false)
//添加分类数据模型
const categoryModel = ref({
    oldname: '',
    newname: ''
})
const categoryAddModel = ref({
    categoryName: ''
})
//添加分类表单校验
const rules = {
    oldname: [
        { required: true, message: '请输入分类名称', trigger: 'blur' },
    ],
    newname: [
        {required: true, message: '请输入更改后的名称', trigger: 'blur' }
    ]
}
// 添加博客分类的函数
import { ElMessage } from 'element-plus'
import { articleCategoryAddService } from '@/api/article.js';
const addCategory = async () => {
    categoryAddModel.value.categoryName = categoryModel.value.oldname;
    let result = await articleCategoryAddService(categoryAddModel.value);
    ElMessage.success(result.message ? result.message : '添加成功！');
    // 刷新数据，让弹窗消失
    dialogVisible.value = false;
    articleCategory();
}

// 修改博客分类的函数
import { articleCategoryUpdateService } from '@/api/article.js';
const updateCategory = async () => {
    let result = await articleCategoryUpdateService(categoryModel.value);
    ElMessage.success(result.message ? result.message : '修改成功！');
    // 刷新数据，让弹窗消失
    dialogVisible.value = false;
    articleCategory();
}

// 定义数据模型，控制弹窗标题变化
const title = ref('')

const showDialog = (row) => {
    dialogVisible.value = true;
    title.value = '编辑分类';
    // 拷贝数据
    categoryModel.value.oldname = row.oldname;
    categoryModel.value.newname = row.newname;
    // 扩展id属性，将来传递给后台，完成分类的修改
    categoryModel.value.id = row.id;
}

const clearData = () => {
    // 清空数据
    categoryModel.value = {
        oldname: '',
        newname: '',
    }
    categoryAddModel.value = {
        categoryName: ''
    }
}

// 删除分类
import { articleCategoryDeleteService } from '@/api/article.js';
import { ElMessageBox } from 'element-plus'
const deleteCategory = (row) => {
    // 添加弹框
    ElMessageBox.confirm(
        '确认删除本条数据？',
        '温馨提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            let result = await articleCategoryDeleteService(row.id);  // 调用api删除数据
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
            // 刷新列表
            articleCategory();
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
</script>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;
    background: #f7f8fa;
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,0.04);
    padding-bottom: 30px;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0 0 0;

        .header-title {
            font-size: 22px;
            font-weight: 600;
            color: #222;
            letter-spacing: 1px;
        }
        .extra {
            display: flex;
            align-items: center;
        }
    }
}

.category-table {
    margin-top: 18px;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    .el-table__header th {
        background: #f2f3f5;
        color: #333;
        font-weight: 500;
    }
    .el-table__row {
        transition: background 0.2s;
    }
    .el-table__row:hover {
        background: #f5f7fa;
    }
}

.category-dialog {
    border-radius: 12px;
    .el-dialog__header {
        font-size: 18px;
        font-weight: 600;
        color: #333;
    }
    .dialog-form {
        margin-top: 10px;
        .el-form-item {
            margin-bottom: 18px;
        }
    }
    .dialog-footer {
        display: flex;
        justify-content: flex-end;
        gap: 12px;
    }
}
</style>